<template>
  <QueryForm />

  <a-divider></a-divider>

  <OperationRow @open="openModal" />

  <BankTable />

  <EditableModal v-model:visible="modalVisible" v-model:modal="currentBtn.modal" />
</template>
<script lang="ts" setup name="page-template">
import QueryForm from './modules/query-form.vue'
import OperationRow from './modules/operation-row.vue'
import BankTable from './modules/table.vue'
import EditableModal from './modules/modal.vue'
import useState from '@/hooks/useState'
import { keyModal } from './key'
import { AnyButton, ModalItem } from '@/form'
import useAxurePage from '@/hooks/useAxurePage'

const [modalVisible] = useState(false)

const id = ref('')
const formItems: Ref<ModalItem[]> = ref([])
const currentBtn = ref({ modal: { title: '' } }) as Ref<AnyButton>

provide(keyModal, {
  id,
  formItems
})

const openModal = (button: AnyButton) => {
  id.value = button.id
  formItems.value = [...button.modal!.modalInfo]
  currentBtn.value = button

  modalVisible.value = true
}

const route = useRoute()
// useAxurePage(route.name as string, route.meta.label as string)
const getTexts = async () => {
  // const { collector } = await useAxurePage('ackass', '通行记录')
  const { collector } = await useAxurePage('btib9c', '人员管理')
  console.log('information', collector)
}

getTexts()

// watch(modalVisible, (show) => {
//   if (!show) {
//     console.log(currentBtn.value)
//   }
// })
</script>
